<style scoped lang="scss">

</style>

<template>
  <div>

    <el-tree
      class="tree-border"
      :data="treeOptions"
      :show-checkbox="showCheckbox"
      :expand-on-click-node=false
      :check-on-click-node=true
      default-expand-all
      ref="tree"
      node-key="id"
      empty-text="请选择有效的项目"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script>

import {getUserListByProjectId} from "@/api/system/user";

export default {
  name: "index",
  created() {
  },
  props: {
    projectId: null,
    //是否显示多选框
    showCheckbox: {type: Boolean, default: false}

  },
  data() {
    return {
      // 树属性
      defaultProps: {
        children: "children",
        label: "label",
        id: "id",
        isLeaf:  (data, node) => {
          if (node.level === 3) {
            // 第三层没有下一级节点
            return true
          }
        }

      },
      // 树选项
      treeOptions: [],
      // 树选择项
      treeCheckedKeys: [],


    }

  },
  methods: {
    // 获取树选项
    getList() {
      getUserListByProjectId(this.projectId).then(response => {
        this.treeOptions = response[0].children;
      });
    },
    handleNodeClick(data, node){
      if (this.showCheckbox) {
        let treeCheckedKeys = this.$refs.tree.getCheckedKeys(true);
        this.$emit('handleCheckChange',treeCheckedKeys)
        console.log('子组件选中的节点treeCheckedKeys',treeCheckedKeys)
      }else{
        this.$emit('handleNodeClick',data)
        console.log('子组件点击data',data)
      }
    }
  },
  watch: {
    projectId(val) {
      if (val){
        this.getList();
      }else{
        this.treeOptions = [];
      }
    }
  }
}
</script>
